/* GENERAL */

.pad { padding: 10px; }
.pad-s { padding: 6px; }
.pad-l { padding: 20px; }
.pad-top { padding-top: 10px !important; }
.pad-btm { padding-bottom: 10px !important; }
.no-pad { padding: 0 !important; }
.no-pad-top { padding-top: 0 !important; }
.no-pad-right { padding-right: 0 !important; }
.no-pad-btm { padding-bottom: 0 !important; }
.no-pad-left { padding-left: 0 !important; }

.mg { margin: 10px; }
.mg-s { margin: 6px; }
.mg-l { margin: 20px; }
.mg-top { margin-top: 10px !important; }
.mg-right { margin-right: 10px !important; }
.mg-btm { margin-bottom: 10px !important; }
.mg-left { margin-left: 10px !important; }
.mg-tr { margin: 10px 10px 0 0 !important; }

.no-mg { margin: 0 !important; }
.no-mg-top { margin-top: 0 !important; }
.no-mg-right { margin-right: 0 !important; }
.no-mg-btm { margin-bottom: 0 !important; }
.no-mg-left { margin-left: 0 !important; }

.flt-l { float: left !important; }
.flt-r { float: right !important; }
.flt-no { width: auto !important; float: none !important; overflow: hidden !important; }

.bdrad { border-radius: 4px !important; }
.bdrad-top { border-radius: 4px 4px 0 0 !important; }
.bdrad-l { border-radius: 4px 0 0 4px !important; }
.bdrad-r { border-radius: 0 4px 4px 0 !important; }
.bdrad-btm { border-radius: 0 0 4px 4px !important; }
.no-bdrad { border-radius: 0 !important; }

.ov-no { overflow: hidden; }

/* GRADIENTS */

.grad {
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.2)) !important;
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.2)) !important;
}
.grad2 {
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.014), rgba(0, 0, 0, 0.02)) !important;
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.014), rgba(0, 0, 0, 0.02)) !important;
}
.grad3 {
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.016), rgba(0, 0, 0, 0.1)) !important;
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.016), rgba(0, 0, 0, 0.1)) !important;
}
.grad-inv {
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), transparent) !important;
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1), transparent) !important;
}
.grad-inv2 {
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent) !important;
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent) !important;
}
.icon-grad {
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(black), to(rgba(255, 255, 255, 0.6)));
}

/* TEXT & TYPOGRAPHY */

.txt-xs { font-size: 8px !important; }
.txt-s { font-size: 10px !important; }
.txt-m { font-size: 14px !important; }
.txt-l { font-size: 16px !important; }
.txt-xl { font-size: 17px !important; }
.txt-xxl { font-size: 20px !important; }

.al-r { text-align: right; }
.al-c { text-align: center; }

.lh-s { line-height: 12px !important; }
.lh-m { line-height: 16px !important; }
.lh-l { line-height: 13.0px !important; }
.lh-xl { line-height: 24px !important; }
.lh-xxl { line-height: 26px !important; }

.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.bold { font-weight: bold; }

/* VISIBILITY & OPACITY */

.hidden {
  opacity: 0;
  visibility: none;
}

/* COLORS */

.red {
  background-color: #b52e19;
  color: #3d0800;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
}
.blue {
  background-color: #295eb3;
  color: #00244a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
}
.green {
  background-color: #658005;
  color: #1e2600;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}
.orange {
  background-color: #bd8302;
  color: #612503;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}
.gray {
  background-color: rgba(255, 255, 255, 0.06);
  color: #999999;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.014), rgba(0, 0, 0, 0.02)) !important;
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.014), rgba(0, 0, 0, 0.02)) !important;
}
.purple {
  background-color: #94318c;
  color: #40044b;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
}
.black {
  background-color: #2a2a2a;
  color: #999999;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.014), rgba(0, 0, 0, 0.02)) !important;
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.014), rgba(0, 0, 0, 0.02)) !important;
}

/* MISCELLANEOUS */

.no-disp { display: none; }
.disp { display: block; }
